<!-- 好友列表 -->
<template>
 <div class="friendlist">
   <el-row class="tac">
     <el-col>
       <el-menu
         default-active="2"
         class="el-menu-vertical-demo frienditem"
         background-color="rgb(230,230,230)"
         text-color="#333"
         active-text-color="rgb(66,153,248)">
         <!-- 一级 -->
            <!-- 一级菜单如果没有children 执行次结构 -->
            <el-submenu :index="`${k}`" v-for="(depart, k) in ts" :key="k" v-if="depart.name != '外借人员'">
              <template slot="title">
                <!-- <img class="avatar"  width="36" height="36" :src="'http://m.hhkj-life.com/wechatwebsite/images/zuzhi.png'"> -->
                <img class="avatar"  width="30" height="30" src="./a.png">
                <span slot="title" class="remark">{{depart.name}}</span>
                <!-- {{ k }} -->
              </template>
              <el-menu-item :index="`${k}-${l}`" v-for="(members, l) in depart.members" :key="l"  @click="selectFriend(members)">
                <img class="avatar"  width="30" height="30" :src="members.avatar">
                <!-- <img class="avatar"  width="36" height="36" :src="'http://m.hhkj-life.com/wechatwebsite/' + members.avatar"> -->
                {{members.realName}}
              </el-menu-item>
            </el-submenu>
            <el-submenu :index="`${index+9}`" v-for="(item, index) in searchedFriendlist" :key="index" v-if="item.name != '吴中城管'">
              <template slot="title" >
                <!-- <img class="avatar"  width="36" height="36" :src="'http://m.hhkj-life.com/wechatwebsite/images/bumen.png'"> -->
                <img class="avatar"  width="30" height="30" src="./b.png">
                <span slot="title" class="remark">{{item.name}}</span>
              </template>
              <el-submenu :index="`${index}-${i}`" v-for="(depart, i) in item.departmentVOList" :key="i">
                <template slot="title">
                  <!-- <img class="avatar"  width="30" height="30" :src="'http://m.hhkj-life.com/wechatwebsite/images/zuzhi.png'"> -->
                  <img class="avatar"  width="30" height="30" src="./a.png">
                  <span slot="title" class="remark">{{depart.name}}</span>
                </template>
                <el-menu-item :index="`${index}-${i}-${j}`" v-for="(members, j) in depart.members" :key="j"  @click="selectFriend(members)">
                  <img class="avatar"  width="30" height="30" :src="members.avatar">
                  <!-- <img class="avatar"  width="36" height="36" :src="'http://m.hhkj-life.com/wechatwebsite/' + members.avatar"> -->
                  {{members.realName}}
                </el-menu-item>
              </el-submenu>
            </el-submenu>
            <el-menu-item :index="`${m}`" v-for="(item, m) in wj" :key="m"  @click="selectFriend(item)">
              <img class="avatar"  width="30" height="30" :src="item.avatar">
              <!-- <img class="avatar"  width="36" height="36" :src="'http://m.hhkj-life.com/wechatwebsite/' + members.avatar"> -->
              {{item.realName}}
            </el-menu-item>
            <!-- <el-menu-item v-for="child in searchedFriendlist" :key="child.id" v-if="!child.children" @click="selectFriend(child.id)">
              <img class="avatar"  width="36" height="36" :src="child.img">
              <span slot="title" class="remark">{{child.remark}}</span>
            </el-menu-item> -->
            <!-- 一级菜单如果有children 执行次结构 -->
       </el-menu>
     </el-col>
   </el-row>
 </div>
</template>

<script>
import { mapState, mapActions ,mapGetters } from 'vuex'
export default {
  data () {
    return {
      props: {
        label: 'name',
        children: 'zones',
        isLeaf: 'leaf'
      },
      wj: [],
      friendList: [],
    rightslist: [],
    }
  },
  created () {
    this.getFriend()
  },
  data() {
    return {
      ts: []
    }
  },
    computed: {
        ...mapState([
            'searchText',
        ]),
        ...mapGetters([
            'searchedFriendlist'
        ])
    },
    methods: {
        getFriend () {
          var params = new FormData()
          // http://im.wzhwgg.com:8070/wechatwebsite/api/relation/selectRelationshipbydepartmentId.do?memberId=&departmentcode=
            params.append('memberId', this.$store.state.user.memberId)
          this.$http.post('/index/getInitList.do', params)
            .then(({data}) => {
              console.log(data);
              
              let sortArr = this.sortFriend(data.object)
              this.$store.commit('getFriendList', sortArr)
              sortArr.some(item => {
                if (item.name == '吴中城管') {
                  this.ts =  item.departmentVOList
                  item.departmentVOList.some(res => {
                    if (res.name == '外借人员') {
                      this.wj = res.members
                    }
                  })
                }
              })
            })
        },
        selectFriend (data) {
          this.$store.commit('selectFriend', data)
          this.$emit('open')
        },
        sortFriend(arr) {
          arr.sort(this.sortBysort)
          arr.forEach(item => {
            if (item.departmentVOList && item.departmentVOList.length > 0) {
              item.departmentVOList = item.departmentVOList.sort(this.sortBysort)
              item.departmentVOList.forEach(res => {
                if (res.members && res.members.length > 0) {
                  res.members = res.members.sort(this.sortBysort)
                }
              })
            }
          })

          return arr
        },
        sortBysort(a,b) {
          return a.sort - b.sort
        },
    }
}
</script>

<style lang="stylus" scoped>
.friendlist
    background-color: rgb(230,230,230)
    height: 100%
    overflow-y: auto
    .tac
      height: 100%
      .el-col 
        height: 100%
    .frienditem
        height: 100%
        border-top: 1px solid #dadada
        &:first-child,&.noborder
            border-top: none
        .friend-info
            display: flex
            padding: 12px
            transition: background-color .1s
            font-size: 0
            &:hover
                background-color: rgb(198,216,235)
            &.active
                background-color: #c4c4c4
            .avatar
                border-radius: 2px
                margin-right: 12px
            .remark
                font-size: 14px
                line-height: 36px



</style>
<style>
@media screen and (max-width: 720px) {
  .el-menu{
    border-right: 0 !important
  }
}
</style>

